/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
body {
  background-color: #992514;
  color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif;
  width: 67%
}

@media screen and (max-width: 768px) {
  body {
    width: 100%; /* Set the width to full for small screens */
  }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}   

a:link {
  color: #e7cc97;
}

a:visited {
  color: rgb(231,204,151);
}

a:hover {
  color: rgb(250,247,232);
}

h1 {
  color: rgb(112,84,73);
}

h2 {
  color: rgb(112,84,73);
}

h3 {
  color: rgb(112,84,73);
}

h4 {
  color: rgb(112,84,73);
}

hr {
  border: 1px solid rgb(112,84,73);
}

blockquote {
  max-width: 50%; /* Slightly thinner than body */
  margin: 1em auto; /* Centering */
  padding: 0.5em;
}

.blockquote-alt {
  max-width: 65%; /* Wider than 50%, still narrower than 60% */
  font-size: 0.9em; /* Makes the text slightly smaller */
}

sup {
  font-size: 0.75em; /* Makes it smaller so it doesn’t push lines apart */
  line-height: 0; /* Prevents extra space */
  position: relative;
  top: -0.3em; /* Adjusts placement to avoid excessive height changes */
}